<template>
     <div class="comment">
         <h3 style="font-weight: bold">发表评论</h3>
         <div><textarea v-model="cmtTxt" style="font-size: 14px" placeholder="请开始你的BB（最多吐槽120字) " maxlength="120"></textarea></div>
         <mt-button :disabled="isdisabledFn" type="primary" @click="setTxt" size="large">发表评论</mt-button>
         <div class="cmt-item" v-for="comment in comments">
             <div class="cmt-head" style="color: #666666; font-size: 8px">
                 第{{ comment.louNum }}楼&nbsp;用户 : 匿名用户&nbsp;发表时间 : {{ comment.formatDateTime | formatDate }}
             </div>
             <p class="cmt-content" style="font-size: 14px">
                 {{ comment.cmtTxt }}
             </p>
         </div>
         <mt-button plain type="danger" size="large" v-if="discomm" @click="loaderMore">加载更多</mt-button>
         <p v-if="disp">暂无评论,少侠赶紧来坐下第一位沙发吧！</p>
     </div>
</template>

<script>
    import {Toast} from "mint-ui";
    import "bootstrap/dist/css/bootstrap.css";
    // 引入 iconfont 字体图标
    // import '../../lib/iconfont/iconfont.css'

    export default {
        name: "comment.vue",
        data() {
            return {
                // 获取用户的评论
                cmtTxt: '',   
                // 设置 button 为不可点击
                isdisabledFn: true,

                // 接收后台传过来的评论
                comments: [],
                // 如果没有评论则不显示加载更多,并提示用户无评论
                discomm: true,
                disp: false
            }
        },
        created() {
          this.getComments();
        },
        // 如果评论框没有输入任何评论则设置提交按钮为不可点击
        updated() {
            if (this.cmtTxt.match(/^\s*$/)) {
                this.isdisabledFn = true;
            } else {
                this.isdisabledFn = false;
            }
        },
        props: ["articleId"],
        methods: {
            // 将用户评论上传到服务器
            setTxt() {
                this.$http.post("comment.main",{"cmtTxt": this.cmtTxt.trim(), "articleId": this.articleId},{emulateJSON: true}).then(function (result) {
                // this.$http.jsonp("setComment.main?cmtTxt=" + this.cmtTxt + "&articleId=" + this.articleId).then(function (result) {
                    if (result.status === 200) {
                        Toast({
                            duration: 700,
                            message: '发表成功',
                            className: 'iconfont',
                            // 使用 bootsrat 字体图标
                            iconClass: 'glyphicon glyphicon-ok'
                        });
                        // 每次往服务器添加评论，都会重新从服务器把最新的评论取出
                        // 在这为了不影响服务器性能，不采用添加一条数据就重新从数据库取出数据，我们在把数据保存到数据库的同时，‘
                        // 会自动在页面也添加一条数据
                        if (this.comments.length < 5) {
                            this.comments.push({cmtTxt: this.cmtTxt.trim(), louNum: this.comments.length+1 , formatDateTime: new Date()});
                            this.discomm = false
                        }else {
                            this.discomm = true;

                        }

                        this.disp = false;


                    }

                    // 点击发表评论将评论框清空
                    this.cmtTxt = '';
                })
            },

            // 获取当前文章详情的所有评论(分页，默认第一页,每页显示5条)
            getComments() {
                this.$http.get("comment.main?articleId=" + this.articleId + "&louNumIndex=0").then(function (result) {
                    if (result.status === 200) {
                        if (result.body.length) {
                            // console.log(result.body);
                            this.comments = result.body;
                            this.discomm = result.body.length >= 5
                        } else {
                            this.discomm = false;
                            this.disp = true;
                        }
                    }
                })
            },
            // 加载更多
            loaderMore() {
                /*将当前文章评论最后一条的返回给服务器，服务器根据最后一条数据的索引返回下一页的5条数据


                -1 是因为 pop 函数会返回最后一条数据同时在原数组中也会删除这条数据，所以我们需要从服务器返回的数据是当前数组
                的最后一条数据和下一页的5条数据，总共就是返回6条数据*/
                // 最好是在后台做任何运算，前端就不做了
                // let louNum =  this.comments.pop().louNum - 1;
                // let louNum =  this.comments.pop().louNum;


                let louNum = this.comments.length;
                this.$http.get("cmtLoadMore.main?articleId=" + this.articleId + "&louNumIndex="+ louNum +"").then(function (result) {
                    if (result.status === 200) {
                        // console.log(result);
                        // this.comments = result.body;
                        // 将当前的数据和下一页的数据拼接
                        this.comments = this.comments.concat(result.body);
                    }
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .comment {
        padding: 10px;
        padding-top: 20px;
        textarea {
            margin-bottom: -4px;
            border-color: #FFFFFF;
            border-top-color: #f0f0f0;
        }
    }
    .cmt-item {
        font-size: 14px;
        margin-top: 10px;
        .cmt-head {
            line-height: 30px;
        }
        .cmt-content {
            padding: 10px 10px;
            font-size: 16px;
            color: #000;
/*            color: burlywood;
            font-family: 华文中宋;*/
        }
    }

</style>
<style lang="scss">
    .iconfont {
        i {
         font-style: normal;
        }
    }
</style>